/**
 * Created by huotaol on 2017/5/4.
 */
import React, {Component} from "react";
import {ScrollView, StyleSheet, Text, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle";
import Button from "../../components/Button";
import * as CarConfig from "../../config/CarFilter";
import * as BuyCarAction from "../../redux/action/BuyCar";
import {refreshBuyCarFilter} from "./BuyCar";
import {Actions} from "react-native-router-flux";
import CustomMarker from "../../components/CustomMarker";
import Slider from "@ptomasroos/react-native-multi-slider";

class Filter extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            origin: CarConfig.ORIGIN[0],
            gearbox: CarConfig.GEARBOX[0],
            kind: [],
            year: {from: '0', to: '∞'},
            meter: {from: METER_OPTION_ARRAY[0], to: METER_OPTION_ARRAY[METER_OPTION_ARRAY.length - 1],},
            displacement: {
                from: DISPLACEMENT_OPTION_ARRAY[0],
                to: DISPLACEMENT_OPTION_ARRAY[DISPLACEMENT_OPTION_ARRAY.length - 1],
            },
            emissionList: [],
        };
        this._confirm = this._confirm.bind(this);
    }


    render() {
        return (
            <View style={{
                flex: 1,
            }}>
                <ScrollView>
                    <View style={[styles.titleContainer]}>
                        <Text style={[[CustomStyle.baseText, styles.title]]}>车源信息：</Text>
                    </View>
                    <View style={[styles.container]}>
                        {CarConfig.ORIGIN.map(item => this._renderOriginItem(item))}
                    </View>

                    <View style={[styles.divider]}/>

                    <View style={[styles.titleContainer]}>
                        <Text style={[[CustomStyle.baseText, styles.title]]}>变速箱：</Text>
                    </View>

                    <View style={[styles.container]}>
                        {CarConfig.GEARBOX.map(item => this._renderGearBoxItem(item))}
                    </View>

                    <View style={[styles.divider]}/>

                    <View style={[styles.titleContainer]}>
                        <Text style={[[CustomStyle.baseText, styles.title]]}>车型：</Text>
                    </View>
                    <View style={[styles.container]}>
                        {CarConfig.KIND.map(item => this._renderKindItem(item))}
                    </View>

                    <View style={[styles.divider]}/>
                    <View style={[styles.titleContainer]}>
                        <Text style={[[CustomStyle.baseText, styles.title]]}>公里数：<Text
                            style={[CustomStyle.baseText, styles.subContent]}>(单位：万/公里)</Text></Text>
                    </View>
                    <Slider {...SLIDER_PROP}
                            values={[this.state.meter.from, this.state.meter.to]}
                            optionsArray={METER_OPTION_ARRAY}
                            onValuesChangeFinish={values => {
                                this.setState({meter: {from: values[0], to: values[1]}});
                            }}/>

                    <View style={[styles.titleContainer]}>
                        <Text style={[[CustomStyle.baseText, styles.title]]}>排量：<Text
                            style={[CustomStyle.baseText, styles.subContent]}>(单位：L)</Text></Text>
                    </View>
                    <Slider
                        values={[this.state.displacement.from, this.state.displacement.to]}
                        {...SLIDER_PROP} optionsArray={DISPLACEMENT_OPTION_ARRAY}
                        onValuesChangeFinish={values => {
                            this.setState({displacement: {from: values[0], to: values[1]}});
                        }}
                    />

                    <View style={[styles.divider]}/>

                    <View style={[styles.titleContainer]}>
                        <Text style={[[CustomStyle.baseText, styles.title]]}>排放标准：</Text>
                    </View>
                    <View >
                        <View style={[styles.container]}>
                            {CarConfig.EMISSION.map(item => this._renderEmissionItem(item))}
                        </View>
                    </View>
                </ScrollView>
                <View style={{
                    height: CustomStyle.getActualSizeInVertical(120),
                    justifyContent: 'center',
                }}>
                    <Button containerStyle={[
                        {
                            height: CustomStyle.getActualSizeInVertical(88),
                            width: CustomStyle.getActualSizeInHorizontal(530),
                            backgroundColor: '#FF7200',
                            alignItems: 'center',
                            justifyContent: 'center',
                            marginTop: CustomStyle.getActualSizeInVertical(50),
                            marginBottom: CustomStyle.getActualSizeInVertical(30),
                            borderRadius: CustomStyle.getActualSizeInVertical(44),
                            alignSelf: 'center',
                        }
                    ]} style={[
                        CustomStyle.baseText,
                        {color: 'white'},
                    ]}
                            text='确认' onPress={() => {
                        this._confirm();
                    }}
                    />
                </View>
            </View>
        );
    }

    _renderOriginItem(item) {
        const isSelect = item === this.state.origin;
        return (
            <View style={[styles.itemContainer, {
                width: CustomStyle.getActualSizeInHorizontal(294),
            }]}>
                <Button
                    containerStyle={[
                        styles.item, {
                            width: CustomStyle.getActualSizeInHorizontal(240),
                            ...getItemStyle(isSelect),
                        }
                    ]}
                    style={[
                        CustomStyle.baseText,
                        {...getItemTextStyle(isSelect)},
                    ]}
                    text={item.name}
                    onPress={() => {
                        let temp = '';
                        if (item !== this.state.origin) {
                            temp = item;
                        }
                        this.setState({origin: temp});
                    }}
                />
            </View>

        );
    }

    _renderGearBoxItem(item) {
        const isSelect = item === this.state.gearbox;
        return (
            <View style={[styles.itemContainer]}>
                <Button
                    containerStyle={[
                        styles.item, {
                            ...getItemStyle(isSelect),
                        }
                    ]}
                    style={[
                        CustomStyle.baseText,
                        {...getItemTextStyle(isSelect)},
                    ]}
                    text={item.name}
                    onPress={() => {
                        let temp = '';
                        if (item !== this.state.gearbox) {
                            temp = item;
                        }
                        this.setState({gearbox: temp});
                    }}
                />
            </View>
        );
    }

    _renderKindItem(item) {
        const isSelect = this.state.kind.indexOf(item) !== -1;
        return (
            <View style={[styles.itemContainer]}>
                <Button
                    containerStyle={[
                        styles.item, {
                            ...getItemStyle(isSelect),
                        }
                    ]}
                    style={[
                        CustomStyle.baseText,
                        {...getItemTextStyle(isSelect)},
                    ]}
                    text={item}
                    onPress={() => {
                        const kindList = this.state.kind;
                        const index = kindList.indexOf(item)
                        if (index === -1) {
                            kindList.push(item);
                        } else {
                            kindList.splice(index, 1);
                        }
                        this.setState({kind: kindList});
                    }}
                />
            </View>
        );
    }

    _renderEmissionItem(item) {
        const isSelect = this.state.emissionList.indexOf(item) !== -1;
        return (
            <View style={[styles.itemContainer]}>
                <Button
                    containerStyle={[
                        styles.item, {
                            ...getItemStyle(isSelect),
                        }
                    ]}
                    style={[
                        CustomStyle.baseText,
                        {...getItemTextStyle(isSelect)},
                    ]}
                    text={item}
                    onPress={() => {
                        const emissionList = this.state.emissionList;
                        const index = emissionList.indexOf(item)
                        if (index === -1) {
                            emissionList.push(item);
                        } else {
                            emissionList.splice(index, 1);
                        }
                        this.setState({emissionList: emissionList});
                    }}
                />
            </View>
        );
    }

    _confirm() {
        const {origin, gearbox, kind, year, meter, displacement, emissionList,} = this.state;
        console.log('filter  ' + emissionList);
        this.props.updateFilter({
            begin: 0,
            total: 0,
            origin: origin.type,
            gearbox: gearbox.type,
            kind,
            year,
            meter: this._getLimit(meter),
            displacement: this._getLimit(displacement),
            emission: emissionList,
        });
        Actions.pop();
        refreshBuyCarFilter();
    }

    _getLimit(param) {
        let {from, to} = param;
        to = to === NO_LIMIT ? '∞' : to;
        return {from, to};
    }
}

const NO_LIMIT = '不限';
const METER_OPTION_ARRAY = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, NO_LIMIT];
const DISPLACEMENT_OPTION_ARRAY = [0, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, NO_LIMIT];


const SLIDER_PROP = {
    containerStyle: {
        flex: 1,
        marginLeft: CustomStyle.getActualSizeInHorizontal(75),
        marginRight: CustomStyle.getActualSizeInHorizontal(75),
        marginTop: CustomStyle.getActualSizeInVertical(70),
    },
    selectedStyle: {
        backgroundColor: '#ffc000'
    },
    unselectedStyle: {
        backgroundColor: '#fff8d5'
    },
    markerStyle: {
        height: 30,
        width: 30,
        borderRadius: 15,
    },
    trackStyle: {borderRadius: 7, height: 3.5},
    touchDimensions: {
        height: 40,
        width: 40,
    },
    customMarker: CustomMarker
};

function getItemStyle(select) {
    if (select) {
        return {
            backgroundColor: '#ffc000',
        };
    }
    return {
        borderColor: '#ede9dd',
        borderWidth: 1,
        backgroundColor: 'white',
    };
}

function getItemTextStyle(selected) {
    if (selected) {
        return {
            color: 'white',
        };
    }
    return {
        color: '#b2a682',
    };
}

const styles = StyleSheet.create({
    container: {
        flexWrap: 'wrap',
        flexDirection: 'row',
    },
    titleContainer: {
        marginLeft: CustomStyle.getActualSizeInHorizontal(32),
        marginTop: CustomStyle.getActualSizeInVertical(40),
    },
    title: {
        color: '#4a3d18',
        fontSize: CustomStyle.getActualFontSize(30),
    },
    subContent: {
        color: '#D3CAB0',
    },
    itemContainer: {
        width: CustomStyle.screenWidth / 3,
        height: CustomStyle.getActualSizeInVertical(108),
        alignItems: 'center',
        justifyContent: 'center',
    },
    item: {
        width: CustomStyle.getActualSizeInHorizontal(180),
        height: CustomStyle.getActualSizeInVertical(68),
        justifyContent: 'center',
        alignItems: 'center',
    },
    itemText: {
        fontSize: CustomStyle.getActualFontSize(30),
    },

    divider: {
        backgroundColor: '#FFFCEE',
        flex: 1,
        height: CustomStyle.getActualSizeInVertical(20),
        marginTop: CustomStyle.getActualSizeInVertical(40),
    },
});

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Filter);
